<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <base href="<%=basePath%>">
  <title>修改密码</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
  <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="themes/icon.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.easyui.min.js"></script>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #head {
      height: 120px;
      width: 100px;
      /* background-color: #66CCCC;*/
      text-align: center;
      position: relative;
    }
    #wrap .logGet {
      height: 800px;
      width: 368px;
      position: absolute;
      background-color: #FFFFFF;
      top: 20%;
      right: 15%;
    }
    .logC a button {
      width: 100%;
      height: 45px;
      background-color: #ee7700;
      border: none;
      color: white;
      font-size: 18px;
    }
    .logGet .logD.logDtip .p1 {
      display: inline-block;
      font-size: 28px;
      margin-top: 30px;
      width: 86%;
    }
    #wrap .logGet .logD.logDtip {
      width: 86%;
      border-bottom: 1px solid #ee7700;
      margin-bottom: 60px;
      margin-top: 0px;
      margin-right: auto;
      margin-left: auto;
    }
    .logGet .lgD img {
      position: absolute;
      top: 12px;
      left: 8px;
    }
    .logGet .lgD input {
      width: 100%;
      height: 42px;
      text-indent: 2.5rem;
    }
    #wrap .logGet .lgD {
      width: 86%;
      position: relative;
      margin-bottom: 30px;
      margin-top: 30px;
      margin-right: auto;
      margin-left: auto;
    }
    #wrap .logGet .logC {
      width: 86%;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
    }
    .title {
      font-family: "宋体";
      color: #FFFFFF;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 36px;
      height: 40px;
      width: 30%;
    }
    .error {
      color: darkred;
    }
    .repeat {
      color: #00ee00;
    }
  </style>
  <script type="text/javascript">
    function ReloadCode(){
      var time=new Date();
      document.getElementById("imagecode").src="<%=request.getContextPath()%>/RandomCodeServletTest??method=randomCode&d="+time;
    }

    window.onload = function () {
      //绑定onsubmit事件
      document.getElementById("form").onsubmit = function () {
        return checkUsername() && checkPassword()  && checkTelphone();
      }
      //给用户名和密码框、手机号分别绑定离焦事件
      document.getElementById("sno").onblur = checkUsername;
      document.getElementById("password").onblur = checkPassword;
      document.getElementById("password2").onblur = checkPassword;
     document.getElementById("password0").onblur = checkPassword;
    }

    //校验用户名
    function checkUsername() {
      //获取用户名的值
      var username = document.getElementById("sno").value;
      //定义正则表达式
      var reg_username = /^([a-zA-Z0-9_-])/;
      //判断值是否符合正则表达式的规则
      var flag = reg_username.test(username);
      //提示信息
      var s_username = document.getElementById("s_sno");
      if (flag) {
        s_username.innerHTML = "用户名格式正确";
      } else {
        //提示红色错误信息
        s_username.innerHTML = "用户名格式有误！";
      }
      return flag;
    }

    //校验密码
    function checkPassword(){

      var password0 = document.getElementById("password0").value;
      var password = document.getElementById("password").value;
      var reg_password0 = /^\w{6,12}$/;
      var flag = reg_password0.test(password0);
      var s_password0 = document.getElementById("s_password0");
      if(flag == false){
        s_password0.innerHTML = "密码格式有误";
      }
      return flag;
    }


  </script>
</head>
<body style="background: url('img/preview2.jpg');height: 100%;width: 100%;">
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand page-scroll" href="index.jsp">西安文理学院社团管理系统</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.jsp">首页</a></li>
        <li><a href="${pageContext.request.contextPath}/CommunityServlet?method=findCommunityCategory">社团</a></li>
        <li><a href="${pageContext.request.contextPath}/IndexServlet?method=findHonorWall">荣誉墙</a></li>
        <li><a href="${pageContext.request.contextPath}/IndexServlet?method=findHallOfFame">名人堂</a></li>
        <li><a href="${pageContext.request.contextPath}/Report.jsp">匿名投诉</a></li>
        <li><a href="${pageContext.request.contextPath}/loginForm.jsp">登录</a></li>
        <li><a href="${pageContext.request.contextPath}/StudentServlet?method=findFactoryId">注册</a></li>
        <c:if test="${ not empty student}">
          <li><a href="${pageContext.request.contextPath}/person/personInfo.jsp">我的</a></li>
        </c:if>
      </ul>
    </div>
  </div>
</nav>

<div style="position: absolute;top: 100px;left: 900px" id="form">
  <div class="header" id="head">
    <div class="title">社团管理系统</div>
  </div>
  <div class="wrap" id="wrap">
    <div class="logGet">
      <!-- 头部提示信息 -->
      <div class="logD logDtip">
        <p class="p1">修改密码</p>
      </div>
      <!-- 输入框 -->
      <form action="${pageContext.request.contextPath}/StudentServlet?method=ChangePassword" method="post">
      <div class="lgD">
        <input type="text" name="sno" id="sno"
               placeholder="输入学号" />
        <span id="s_sno" class="error"></span>
      </div>
      <div class="lgD">
        <input type="password" id="password0" name="oldPassword"
               placeholder="输入原密码" />
        <span id="s_password0" class="error"></span>
      </div>
      <div class="lgD">
        <input type="password" name="newPassword" id="password"
               placeholder="输入新密码" />
        <span id="s_password" class="error"></span>
      </div>
      <div class="lgD">
        <input type="password"  name="newPassword" id="password2"
               placeholder="确认新密码" />
        <span id="s_password2" class="repeat"></span>
      </div>
      <div class="lgD">
        <img alt="验证码" id="imagecode" src="<%=request.getContextPath()%>/RandomCodeServlet?method=randomCode"/><br/>
        <a href="javascript:ReloadCode();" style="margin-left: 120px">看不清楚，换一张</a>
        <strong style="color: red">${msg}</strong>
        <input type="text" style="margin-top: 20px" placeholder="输入验证码" name="yzm"/>
        <strong style="color: red">${msg}</strong>
        <strong style="color: red">${error}</strong>
      </div>
      <div class="logC">
        <a type="sub"><button>确定修改</button></a>
      </div>
      </form>
    </div>
  </div>
</div>
</div>
</body>
</html>
